import React from "react";
import { Form, Input, Button, Card, message } from "antd";
import { updateForm } from "@service/form";
import ClassifyButton from "../../manage/classifyButton";
import "./metadata.scss";

const Metadata = Form.create({ name: "form_in_data" })(
  class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        formLayout: 'horizontal',
        buttonValue: props.metaValue.classify,
      };
    }

    componentDidMount = () => {
      const { setFieldsValue } = this.props.form;
      setFieldsValue(this.props.metaValue);
    }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const list = updateForm(values);
      if(list){
        message.success('修改成功！');
      }
    });
  };
 
  render(){
    const { formLayout, buttonValue } = this.state;
    console.log(this.state);
    const { getFieldDecorator } = this.props.form;
    const formItemLayout =
      formLayout === 'horizontal'
        ? {
          labelCol: { span: 3 },
          wrapperCol: { span: 6 },
        }
        : null;
    const buttonItemLayout =
      formLayout === 'horizontal'
        ? {
          wrapperCol: { span: 6, offset: 3 },
        }
        : null;
    return(
      <Card style={{ backgroundColor: '#f8f8f8' }}>
        <Form 
          {...formItemLayout} 
          onSubmit={this.handleSubmit} 
          style={{ marginTop: 50 }}
        >
          <Form.Item label="Form ID">
            {getFieldDecorator('id', {
              rules: [
                { required: true, message: "请输入Form ID" },
                { max: 30, message: "最大30个字符" },
              ],
            })(
              <Input />,
            )}
          </Form.Item>
          <Form.Item label="表单名称">
            {getFieldDecorator('name', {
              rules: [
                { required: true, message: "请输入表单名称" },
                { max: 30, message: "最大30个字符" },
              ],
            })(
              <Input />,
            )}
          </Form.Item>
          <Form.Item label="描述">
            {getFieldDecorator('description')(
              <Input />,
            )}
          </Form.Item>
          <Form.Item label="版本号">
            {getFieldDecorator('version')(
              <Input />,
            )}
          </Form.Item>
          <Form.Item label="应用类型">
            {getFieldDecorator('classify', {
              initialValue: buttonValue,
            })(<ClassifyButton />,
            )}
          </Form.Item>
          <Form.Item {...buttonItemLayout}>
            <Button type="primary" htmlType="submit">
            修改
            </Button>
          </Form.Item>
        </Form>
      </Card>
    );
  }
  }
);
export default Metadata;